<template>
  <div class="createPage">
    <!-- 顶部按钮 -->
    <div class="topBtn">
      <div class="reback">
        <el-button type="primary" size="mini" round @click="rebackBtn">返回</el-button>
      </div>
      <div class="save">
        <el-button type="primary" size="small" round @click="saveData">保存</el-button>
      </div>
    </div>
    <!-- 操作区域 -->
    <div class="template">
      <!-- 左边 -->
      <div class="left">
        <el-tabs v-model="modelsName">
          <el-tab-pane label="模板列表" name="first">
            <draggable v-model="modelList" :options="optionsLeft" :clone="cloneDog">
              <div class="modelItem" v-for="item in modelList" :key="item.id">
                <div class="name">{{ item.modelName }}</div>
                <img :src="item.viewImg" />
              </div>
              <div v-if="modelList.length <= 0" class="noModelList">暂无可用模板</div>
            </draggable>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 中间 -->
      <div class="center">
        <!-- 页面信息 -->
        <div class="navInfo pointer" @click="isShowInfo">
          <span class="title">{{ waterfallInfo.flowName }}</span>
        </div>
        <!-- 楼层列表 -->
        <div class="panle"
          :style="bgImg !== '' ? { background: 'url(' + bgImg + ')', backgroundSize: 'cover', backgroundPosition: 'center center' } : ''"
          @click="defaultNull">
          <draggable class="view" :options="optionsRight" :list="waterfallList">
            <!-- 楼层 -->
            <div class="item" v-for="(items, index) in waterfallList" :data-idx="index" :key="index"
              @click.stop="selectType(items, 'a' + index)">
              <!-- 删除蒙层 -->
              <div style="width:100%;height:100%;">
                <!-- 已删除楼层提示 -->
                <div v-if="items.operationStatus == 3" class="maskIndex" style="height:100%;"></div>
                <div v-if="items.operationStatus == 3" class="tips" style="height:100%;">
                  <span class="bgTip">此楼层已被删除</span>
                </div>
                <!-- 标题栏 -->
                <div :style="{ display: items.titleBar.isTitle == 2 && items.titleBar.isMore == 2 ? 'none' : 'block' }">
                  <div class="titleList" :style="{
                    justifyContent: items.titleBar.isTitle == 1 && items.titleBar.isMore == 2
                      ? 'flex-start' : (items.titleBar.isTitle == 2 && items.titleBar.isMore == 1)
                        ? 'flex-end' : ''
                  }">
                    <div class="titleItem" v-if="items.titleBar.isTitle == 1">
                      <img v-if="items.titleBar.titImg != ''" :src="items.titleBar.titImg">
                      <span v-else style="color:#fff;border:1px dashed #fff;padding:3px;">标题海报</span>
                    </div>
                    <div class="moreItem" v-if="items.titleBar.isMore == 1" @click.stop="moreBtn(items, 'c' + index)"
                      :class="{ 'comBorder': modelClass == 'c' + index }">
                      <img v-if="items.titleBar.btnImg != ''" :src="items.titleBar.btnImg">
                      <span v-else style="color:#fff;border:1px dashed #fff;padding:3px;">更多按钮海报</span>
                    </div>
                  </div>
                </div>
                <!-- 模板 -->
                <div :class="{ 'border': modelClass == 'a' + index }"
                  :style="{ position: 'relative', width: '100%', height: `${items.modelH}px` }">
                  <div v-for="(val, idx) in items.comList" :key="idx"
                    @click.stop="configData(val, items, 'b' + index, 'c' + idx)"
                    :class="{ 'comBorder': val.commission != 1 && (modelClass == 'b' + index && comClass == 'c' + idx) }" :style="{
                      position: 'absolute',
                      boxSizing: 'border-box',
                      border: '1px dashed #000',
                      transform: `translate(${val.style.x}px,${val.style.y}px)`,
                      width: `${val.style.w}px`,
                      height: `${val.style.h}px`
                    }">
                    <WidgetListAll :com="val.com" :widgetData="val" :type="type" :bannerSiteCode="bannerSiteCode"
                      @getPreView='getPreView' :bannerVideoSideCode="bannerVideoSideCode" @checkedTitle="checkedTitle"
                      @configData="getConfigData(arguments, items)" :customMadeSiteCode="customMadeSiteCode">
                    </WidgetListAll>
                  </div>
                </div>
              </div>
              <!-- delete -->
              <i v-if="items.operationStatus != 3" @click.stop="deleteItem(items, index)" class="el-icon-error"></i>
            </div>
          </draggable>
        </div>
      </div>
      <!-- 右边 -->
      <div class="right">
        <!-- 瀑布流信息 -->
        <WaterfallInfo v-if="isWaterInfo" :disabledType="disabledType" :waterfallData="waterfallInfo"
          @refresh="getWaterfall">
        </WaterfallInfo>
        <!-- 楼层信息 -->
        <FloorConfig v-if="isModelInfo" :disabledType="disabledType" :floorData="floorData"
          :handleModelType="handleModelType" @freshTable="getFloorInfo" @freshWaterfall="getWaterfall"
          @titleImg="getTitleImg" @titleBar="getTitleBar">
        </FloorConfig>
        <!-- 更多按钮 -->
        <MoreBtnConfig v-if="isMorebtn" :disabledType="disabledType" :moreBtnInfo="moreBtnInfo"></MoreBtnConfig>
        <!-- 其他配置信息 -->
        <el-tabs v-if="isRight" v-model="activeName2" :before-leave="beforeChange">
          <el-tab-pane label="基础信息配置" name="first">
            <BasicInfo ref="basic" :disabledType="disabledType" :siteId="siteId" :positionInfo="positionInfo"
              :floorComList="floorComList" @hrefUrlModel="getHrefUrlModel">
            </BasicInfo>
          </el-tab-pane>
          <el-tab-pane label="位置使用方" name="fourth">
            <RecommendConfig ref="recommend" :disabledType="disabledType" :positionInfo="positionInfo"
              :floorComList="floorComList"></RecommendConfig>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
// 插件
import draggable from "vuedraggable";
// 属性组件
import WidgetListAll from '@/components/visualization/model/widgetListAll.vue'; //组件列表
// 模板属性
import WaterfallInfo from '@/components/visualization/modelCommon/waterfallInfo.vue'; //页面信息
import FloorConfig from '@/components/visualization/modelCommon/floorConfig.vue'; //楼层信息配置
import MoreBtnConfig from '@/components/visualization/modelCommon/moreBtnConfig.vue'; //更多按钮配置
import BasicInfo from '@/components/visualization/modelCommon/basicInfo.vue'; //基础信息配置
import RecommendConfig from '@/components/visualization/modelCommon/recommendConfig.vue'; //厂商配置
// 随机数id
import { toHex, randNum4 } from '@/commont/constants/unionCode.js';
let modelMaxH = 0;//当前模板的高度
export default {
  components: {
    draggable, WidgetListAll,
    WaterfallInfo, FloorConfig, MoreBtnConfig, BasicInfo, RecommendConfig
  },
  props: {},
  data() {
    return {
      /************ 左边模板列表 ************/
      modelsName: "first",
      modelList: [],
      /************ 中间操作面板 ************/
      waterfallInfo: {},
      waterfallList: [],
      isFirst: false,
      bgImg: '',//背景图
      modelClass: null,//点击模板时的样式
      comClass: null,//点击组件时的样式
      // 轮播海报、轮播视频标记
      type: "waterfall",
      // 轮播图
      bannerSiteCode: "",
      bannerSiteIndex: 0,
      // 轮播视频
      bannerVideoSideCode: "",
      videoSiteIndex: 0,
      // 定制组件
      customMadeSiteCode: '',
      // 首屏弹窗
      isFirstModel: false,

      /************ 右边模板属性 ************/
      disabledType: false,
      floorData: {},
      activeName2: "first",
      isWaterInfo: false,
      isModelInfo: false,
      isMorebtn: false,
      isRight: false,
      handleModelType: '',// 属性标记类型：新增  编辑
      siteId: '',//位置信息
      positionInfo: {},//海报位信息
      floorComList: {},//楼层组件信息
      moreBtnInfo: {},//更多按钮海报配置
      isHrefUrlModel: false,//配置链接弹窗
      hrefModelTitle: "",//配置链接弹窗提示信息
      hrefUrl: "",
      itemHrefUrl: {},
    }
  },
  computed: {
    optionsLeft() {
      return {
        animation: 150,
        group: {
          name: "shared",
          pull: 'clone',
          put: false
        },
        sort: false,
      }
    },
    optionsRight() {
      return {
        animation: 150,
        group: 'shared',
      }
    }
  },
  watch: {},
  created() {
    this.getModelList();
  },
  mounted() {
    this.getWaterfall();
  },
  updated() { },
  methods: {
    /*********** 顶部 *************/
    // 返回
    rebackBtn() {
      this.$router.push('pageList');
    },
    // 保存
    saveData() {
      console.log('保存');
    },

    /*********** 左侧 *************/
    // 获取左侧模板
    getModelList() {
      this.modelList = [
        {
          id: '001',
          modelName: '测试1',
          viewImg: require("@/assets/img/1.jpg"),
          "modelJs": "[{\"type\":\"rowThreeColPoster\",\"label\":\"一行三列普通海报\",\"com\":\"RowThreeColPoster\",\"commission\":1,\"style\":{\"x\":4,\"y\":5,\"w\":1135,\"h\":212},\"value\":[{\"index\":1,\"name\":\"川剧霸王别姬 (1).jpg\",\"url\":\"http://118.123.189.236:18080/categoryaudit/img/auditPics/20220714/20220714153606105242.jpg\"},{\"index\":2,\"name\":\"川剧逼侄登科 (2).jpg\",\"url\":\"http://118.123.189.236:18080/categoryaudit/img/auditPics/20220714/20220714153611377750.jpg\"},{\"index\":3,\"name\":\"川剧贵妃醉酒 (2).jpg\",\"url\":\"http://118.123.189.236:18080/categoryaudit/img/auditPics/20220714/20220714153618725816.jpg\"}]}]"
        },
        {
          id: '002',
          modelName: '测试2',
          viewImg: require("@/assets/img/2.jpg"),
          "modelJs": "[{\"type\":\"rowThreeColPoster\",\"label\":\"一行三列普通海报\",\"com\":\"RowThreeColPoster\",\"commission\":1,\"style\":{\"x\":4,\"y\":5,\"w\":1135,\"h\":212},\"value\":[{\"index\":1,\"name\":\"川剧霸王别姬 (1).jpg\",\"url\":\"http://118.123.189.236:18080/categoryaudit/img/auditPics/20220714/20220714153606105242.jpg\"},{\"index\":2,\"name\":\"川剧逼侄登科 (2).jpg\",\"url\":\"http://118.123.189.236:18080/categoryaudit/img/auditPics/20220714/20220714153611377750.jpg\"},{\"index\":3,\"name\":\"川剧贵妃醉酒 (2).jpg\",\"url\":\"http://118.123.189.236:18080/categoryaudit/img/auditPics/20220714/20220714153618725816.jpg\"}]}]"
        },
        {
          id: '003',
          modelName: '测试3',
          viewImg: require("@/assets/img/3.jpg"),
          "modelJs": "[{\"type\":\"rowThreeColPoster\",\"label\":\"一行三列普通海报\",\"com\":\"RowThreeColPoster\",\"commission\":1,\"style\":{\"x\":4,\"y\":5,\"w\":1135,\"h\":212},\"value\":[{\"index\":1,\"name\":\"川剧霸王别姬 (1).jpg\",\"url\":\"http://118.123.189.236:18080/categoryaudit/img/auditPics/20220714/20220714153606105242.jpg\"},{\"index\":2,\"name\":\"川剧逼侄登科 (2).jpg\",\"url\":\"http://118.123.189.236:18080/categoryaudit/img/auditPics/20220714/20220714153611377750.jpg\"},{\"index\":3,\"name\":\"川剧贵妃醉酒 (2).jpg\",\"url\":\"http://118.123.189.236:18080/categoryaudit/img/auditPics/20220714/20220714153618725816.jpg\"}]}]"
        },
      ]
    },
    // 生成楼层Id
    getFloorIdNum() {
      return toHex(new Date().getTime()) + '0' + randNum4().toLocaleUpperCase();
    },
    // 创建楼层列表
    cloneDog(item) {
      let modelH = 0, sum = [];
      let components = JSON.parse(item.modelJs);
      // 创建楼层时取消选中样式
      this.modelClass = null;
      this.comClass = null;
      // 特殊处理
      components.forEach(ele => {
        ele.style.w = parseInt(ele.style.w / 4 * 3);
        ele.style.h = parseInt(ele.style.h / 4 * 3);

        if (ele.type == "bannerVideo1") {
          ele.siteId = this.getFloorIdNum();
          ele.value.forEach(val => {
            val.name = "";
            val.url = "";
          })
        } else {
          ele.value.forEach(val => {
            val.siteId = this.getFloorIdNum();
            val.name = "";
            val.url = "";
          })
        }

        if (modelH < (ele.style.y + ele.style.h)) {
          sum.push(ele.style.y + ele.style.h + 10);
          modelMaxH = Math.max(...sum)
        }
      })
      // 标题栏
      let titleBar = {
        isTitle: 2,
        titImg: '',
        isMore: 2,
        moreName: '',
        btnImg: '',
        btnIndex: 0,
        btnCode: this.getFloorIdNum(),
      }
      return {
        modelId: item.modelId,//模板id
        floorId: this.getFloorIdNum(),//楼层id
        comList: components,//组件列表
        modelH: modelMaxH,//楼层高度
        modelVersion: item.modeVersion,//模板类型版本号
        modelSign: item.modelSign,//模板标记
        titleBar: titleBar,
      };
    },

    /*********** 中间 *************/
    // 展示页面信息
    isShowInfo() {
      this.isWaterInfo = true;
      this.isModelInfo = false;
      this.isRight = false;
      this.isMorebtn = false;
    },
    // 获取瀑布流
    getWaterfall() {
      this.waterfallInfo = {
        flowId: "3ST001843642F449A0001",
        flowName: "测试大厅-首页TS-全部适用TS-08938"
      };
      this.waterfallList = [
        {
          id: '0001',
          modelId: '32eweuojojso493049',
          floorId: '312313123123eewqewe3123',
          modelVersion: 1,
          modelSign: '21',
          modularId: '43435354',
          operationStatus: 2,
          releaseStatus: 3,
          comList: [],
          modelH: 300,
          titleBar: {
            btnCode: "3ST001843642FBDC0A2F1",
            btnImg: "",
            btnIndex: 0,
            isMore: 2,
            isTitle: 2,
            moreName: "",
            titImg: ""
          },
        }
      ]
    },
    // 获取标题栏海报
    getTitleImg(data) {
      this.waterfallList.forEach(item => {
        if (item.floorId == data.floorId) {
          item.titleBar.titImg = data.titImg;
        }
      })
    },
    // 获取标题栏海报是否展示
    getTitleBar(data) {
      this.waterfallList.forEach(item => {
        if (item.floorId == data.floorId) {
          item.titleBar.isTitle = data.isTitle;
          item.titleBar.isMore = data.isMore;
        }
      })
    },
    // 获取楼层信息
    getFloorInfo(floorId, type, dataType) {
      this.floorData = {
        id: '3231',
        flowId: '432424234',
        floorId: '444234234',
        modelId: '432324',
        modularId: '534534313232131',
        modelVersion: 3,
        modelSign: 23,
        dataType: 32,
        modularName: '测试楼层',
        operationStatus: 1,
        description: '',
      }
    },
    // 取消默认选中
    defaultNull() {
      this.modelClass = null;
      this.comClass = null;
      this.bannerSiteIndex = 0;
      this.videoSiteIndex = 0;
      this.customMadeSiteCode = "";
    },
    // 设置楼层信息
    selectType(item, index) {
      this.modelClass = index;//样式
      item.flowId = this.flowId;
      let floorIdList = [];
      this.waterfallList.forEach(ele => { floorIdList.push(ele.floorId); });
      item.sortModularId = floorIdList.toString();
      this.floorData = item;
      this.getFloorInfo(item.floorId, 'floor', 1);
      this.bannerSiteIndex = 0;
      this.videoSiteIndex = 0;
      this.customMadeSiteCode = "";
    },
    // 配置更多按钮海报
    moreBtn(items, index) {
      // 已删除楼层不执行任何操作
      if (items.operationStatus == 3) return;
      // 未删除楼层
      console.log('更多按钮配置信息：', items);
      this.modelClass = index;//样式
      this.moreBtnInfo = items;
      this.bannerSiteIndex = 0;
      this.videoSiteIndex = 0;
      this.getFloorInfo(items.floorId, 'moreBtn', 1);
    },
    // 配置组件数据
    configData(item, items, index, idx) {
      // 已删除楼层不执行任何操作
      if (items.operationStatus == 3) return;
      // 未删除楼层
      this.modelClass = index;
      this.comClass = idx;//样式
      item.flowId = this.flowId;//瀑布流id
      item.modelId = items.modelId;//模板id
      item.floorId = items.floorId;//楼层id
      this.positionInfo = item;
      this.siteId = item.siteId;//位置id，用作监听
      if (item.type != 'bannerVideo1') {
        this.positionInfo.index = item.value[0].index;
        this.positionInfo.siteId = item.value[0].siteId;
      }
      this.floorComList = {// 当前楼层json
        comList: items.comList,
        modelH: items.modelH,
        titleBar: items.titleBar,
      };
      if (item.type == 'bannerBar') {//轮播海报
        item.defaultImg = item.value[0].url;
        this.bannerSiteCode = item.value[this.bannerSiteIndex].siteId;
        if (this.bannerSiteCode == '') {
          this.bannerSiteIndex = 0;
          this.bannerSiteCode = item.value[0].siteId;
        } else {
          this.positionInfo.siteId = item.value[this.bannerSiteIndex].siteId;
          this.positionInfo.index = item.value[this.bannerSiteIndex].index;
          this.positionInfo.defaultImg = item.value[this.bannerSiteIndex].url;
          if (this.bannerSiteIndex == item.value[this.bannerSiteIndex].siteIndex) {
            this.bannerSiteIndex = 0;
          }
        }
        this.customMadeSiteCode = "";
      } else if (item.type == 'bannerVideo') {//轮播视频
        item.defaultImg = item.value[0].url;
        this.bannerVideoSideCode = item.value[this.videoSiteIndex].siteId;
        if (this.bannerVideoSideCode == '') {
          this.videoSiteIndex = 0;
          this.bannerVideoSideCode = item.value[0].siteId;
        } else {
          this.positionInfo.siteId = item.value[this.videoSiteIndex].siteId;
          this.positionInfo.index = item.value[this.videoSiteIndex].index;
          this.positionInfo.defaultImg = item.value[this.videoSiteIndex].url;
          if (this.videoSiteIndex == item.value[this.videoSiteIndex].siteIndex) {
            this.videoSiteIndex = 0;
          }
        }
        this.customMadeSiteCode = "";
      } else {
        // 其他组件时，轮播海报、轮播视频恢复默认
        this.bannerSiteIndex = 0;
        this.bannerSiteCode = "";
        this.videoSiteIndex = 0;
        this.bannerVideoSideCode = "";
        this.customMadeSiteCode = "";
      }
      this.getFloorInfo(items.floorId, 'poster', 1);
    },
    // 配置轮播海报
    getPreView(e, item, index, data) {
      e.preventDefault();//阻止默认事件
      // e.stopPropagation();//阻止事件冒泡
      data.defaultImg = item.url;
      item.siteIndex = index;
      this.bannerSiteIndex = index;
    },
    // 配置轮播视频
    checkedTitle(e, item, index, data) {
      e.preventDefault();//阻止默认事件
      // e.stopPropagation();//阻止事件冒泡
      data.defaultImg = item.url;
      item.siteIndex = index;
      this.videoSiteIndex = index;
    },
    // 定制组件属性配置
    getConfigData(data, items) {
      data[0].preventDefault();//阻止默认事件
      data[0].stopPropagation();//阻止事件冒泡
      // 已删除楼层不执行任何操作
      if (items.operationStatus == 3) return;
      // 选中的样式
      this.customMadeSiteCode = data[1].siteId;
      // 普通组件取消选中样式
      this.modelClass = null;
      this.comClass = null;
      this.positionInfo = data[2];
      this.positionInfo.flowId = this.flowId;
      this.positionInfo.floorId = items.floorId;
      this.positionInfo.modelId = items.modelId;
      this.positionInfo.index = data[1].index;
      this.positionInfo.siteId = data[1].siteId;
      this.siteId = data[1].siteId;//位置id，用作监听
      this.floorComList = {// 当前楼层json
        comList: items.comList,
        modelH: items.modelH,
        titleBar: items.titleBar,
      };
      this.getFloorInfo(items.floorId, 'poster', 1);
    },

    /*********** 右侧 *************/
    // 右边属性切换查询对应数据
    beforeChange(val) {
      let basicInfo = JSON.parse(sessionStorage.getItem("basicInfo"));
      console.log('基础信息-父页面：', basicInfo);
      if (val == 'first') {
        this.$refs.basic.initQueryBasic();
      }
      else if (val == 'fourth') {
        if (basicInfo == 'null') {
          this.$message({ message: '请先保存基础信息，再填写位置使用方相关信息！', type: 'warning' });
          return false
        } else {
          this.$refs.recommend.initQueryRecomm();
        }
      }
    },
    // 配置链接弹窗
    getHrefUrlModel(item, val) {
      this.itemHrefUrl = item;
      this.isHrefUrlModel = val;
      this.hrefModelTitle = item.name;
    },
    // 关闭链接弹窗
    handleHrefCancle() {
      this.isHrefUrlModel = false;
      this.itemHrefUrl.url = "";
    },
    // 确认链接地址
    handleHrefOk() {
      this.isHrefUrlModel = false;
    },
    // 删除楼层
    deleteItem(items, index) {
      if (items.id) {
        this.waterfallList.splice(index, 1);
      } else {
        this.isWaterInfo = true;
        this.isModelInfo = false;
        this.isRight = false;
        this.waterfallList.splice(index, 1);
      }
    },

  },
  filters: {},
}
</script>

<style lang="scss" scoped>
.createPage {
  width: 100%;
  height: 100%;

  // 顶部按钮
  .topBtn {
    padding: 15px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  // 操作区域
  .template {
    width: 100%;
    height: calc(100vh - 155px);
    margin-top: 15px;
    padding: 15px;
    background-color: #FFFFFF;
    display: flex;

    // 左边小组件
    .left {
      width: 260px;
      height: 100%;
      overflow-y: auto;
      box-shadow: 0px 2px 8px 0px #ccc;
      font-size: 15px;

      .modelItem {
        height: 80px;
        margin: 15px 10px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        cursor: move;

        &:hover {
          border: 1px dashed #3089fd;
          color: #3089fd;
          background-color: #e5f0fe;
        }

        .name {
          margin-bottom: 2px;
          margin-left: 5px;
        }

        img {
          width: 100%;
          height: 50px;
        }
      }

      .noModelList {
        text-align: center;
        margin-top: 50px;
        color: #cdcdcd;
      }
    }

    // 中间面板
    .center {
      width: calc(100% - 700px);
      height: 100%;
      margin: 0 20px;
      box-shadow: 0px 2px 8px 0px #ccc;
      position: relative;

      .navInfo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: #fff;
        transition: all .3s;
        padding: 10px 0;

        & * {
          pointer-events: none; // 解决JS鼠标事件穿透到子标签
        }

        .title {
          padding-left: 20px;
          transform: translateX(-50%);
        }
      }

      .panle {
        margin-top: 42px;
        height: calc(100% - 42px);
        background: linear-gradient(-90deg, rgba(82, 82, 82, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(82, 82, 82, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px;
        padding: 10px 15px 10px 15px;
        overflow-y: auto;
        display: flex;
        justify-content: center;

        .view {
          width: 860px;
          height: 100%;

          // 背景
          .bgImg {
            position: absolute;
            top: 0;
            width: 100%;
            height: calc(100% - 42px);
          }

          // 楼层
          .item {
            position: relative;

            &:hover {
              width: 860px;
              transition: all .2s;
              transform: scale(0.99);
              border-radius: 2px;
              box-shadow: 0 0 3px #afafaf;
              background-color: rgba(229, 240, 254, 0.2);

              .el-icon-error {
                display: block;
              }
            }

            // 标题栏
            .titleList {
              width: 100%;
              padding: 10px 15px;
              display: flex;
              justify-content: space-between;

              .titleItem,
              .moreItem {
                border: 1px dashed #000;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }

            .el-icon-error {
              position: absolute;
              right: -10px;
              top: -6px;
              color: red;
              font-size: 25px;
              cursor: pointer;
              display: none;
              z-index: 9999;
            }
          }
        }
      }

      // 模板点击时的样式
      .border {
        border: 2px dashed blue !important;
      }

      .comBorder {
        border: 2px dashed red !important;
        padding: 5px;
      }

      // 楼层删除时的样式
      .maskIndex {
        position: absolute;
        width: 100%;
        background-color: red;
        opacity: 0.4;
        z-index: 9;
      }

      .tips {
        position: absolute;
        width: 100%;
        color: red;
        font-size: 30px;
        z-index: 99;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          .bgTip {
            background-color: #ffffff;
          }
        }

        .bgTip {
          padding: 0 5px;
          border-radius: 4px;
        }
      }
    }

    // 右边属性
    .right {
      width: 410px;
      height: 100%;
      overflow-y: auto;
      box-shadow: 0px 2px 8px 0px #ccc;
    }
  }
}
</style>